<template>
  <div class="rightTopBox">
    <h4>12小时收费金额分布图</h4>
    <div id="rightTopCharts" :style="{width: '100%', height: '100%'}"></div>
  </div>
</template>

<script>
import {
  getTotalDataHourly
} from '../api/api';

export default {
  name: 'rightTop',
  data() {
    return {
      msg: 'rightTop',
      valueData: [],
      tiemDate: []
    }
  },
  //10s执行一次
  mounted() {
    this.drawRightTop();
    setInterval(() => {
      this.drawRightTop();
    }, 10000);
  },
  methods: {
    drawRightTop() {
      getTotalDataHourly().then(res => {
        this.tiemDate = []
        this.valueData = []
        res.datas.forEach((item, index) => {
          this.tiemDate.push(item.now);
          this.valueData.push(item.total_pay_charge);
        })
        // 基于准备好的dom，初始化echarts实例
        let rightTopCharts = this.$echarts.init(document.getElementById('rightTopCharts'))
        // 绘制图表
        rightTopCharts.setOption({
          tooltip: {},
          textStyle: {
            color: '#fff'
          },
          xAxis: {
            axisLine: {
              lineStyle: {
                type: 'solid',
                color: '#062247', //左边线的颜色
                width: '1' //坐标线的宽度
              }
            },
            axisLabel: {
              textStyle: {
                color: '#fff', //坐标值得具体的颜色
              }
            },
            data: this.tiemDate
          },
          yAxis: {
            splitLine: { //网格线
              show: true,
              lineStyle: {
                color: ['#062247']
              }
            },
            axisLine: {
              lineStyle: {
                type: 'solid',
                color: '#0e1a4d', //左边线的颜色
                width: '1' //坐标线的宽度
              }
            },
            axisLabel: {
              textStyle: {
                color: '#fff', //坐标值得具体的颜色
              }
            },
          },
          series: [{
            barWidth: 16,
            // color: ['#5ff1fc', '#5ff1fc', '#ffff00', '#5ff1fc', '#5ff1fc', '#5ff1fc', '#5ff1fc', '#5ff1fc', '#5ff1fc', '#5ff1fc', '#5ff1fc', '#5ff1fc', '#ff0000'],
            type: 'bar',
            itemStyle: {
              normal: {
                label: {
                  show: true,
                  position: 'top',
                  formatter: '{c}'
                },
                //每个柱子的颜色即为colorList数组里的每一项，如果柱子数目多于colorList的长度，则柱子颜色循环使用该数组
                color: function (params) {
                  var colorList = ['#5ff1fc', '#5ff1fc', '#5ff1fc', '#5ff1fc', '#5ff1fc', '#5ff1fc', '#5ff1fc', '#5ff1fc', '#5ff1fc', '#5ff1fc', '#5ff1fc', '#5ff1fc', '#ff0000'];
                  return colorList[params.dataIndex];
                }
              }
            },
            data: this.valueData
          }]
        });
      })
    }
  }
}

</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
.rightTopBox {
  position: absolute;
  right: 0.44rem;
  top: 0.58rem;
  background: url(../assets/rightcombg.png) no-repeat;
  background-size: 100% auto;
  width: 6.15rem;
  height: 3.1rem;
  color: aqua;
}

.rightTopBox h4 {
  position: absolute;
  left: 0.3rem;
  top: 0.1rem;
  font-size: 0.18rem;
  color: #18b3f0;
  margin: 0;
  padding: 0;
}
</style>
